<template>
	<view class="page">
		<view class="doctorlist">
			<view class="doctorInfo">
				<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
				<view class="textInfo">
					<view class="name_call">
						<view class="name">
							{{offerInfo.name}}
						</view>
						<view class="call">
							{{offerInfo.call}}
						</view>
					</view>
					<view class="depart_campus">
						<view class="depart">
							{{offerInfo.depart}}
						</view>
						<view class="campus">
							四川省保健院南苑
						</view>
					</view>
				</view>
			</view>
			<view class="patient_info">
				<view class="patient_list">
					<view class="list_title">
						就诊人
					</view>
					<view class="list_content">
						{{offerInfo.patient}}
					</view>
				</view>
				<view class="patient_list">
					<view class="list_title">
						预约号
					</view>
					<view class="list_content">
						20200101020
					</view>
				</view>
				<view class="patient_list">
					<view class="list_title">
						预约时间
					</view>
					<view class="list_content">
						{{offerInfo.registortime}}（{{offerInfo.registortime.split(' ')[1]=='14:00-18:00'?'下午':'上午'}}）
					</view>
				</view>
				<view class="patient_list">
					<view class="list_title">
						就诊地点
					</view>
					<view class="list_content">
						南苑门诊大楼二楼520诊室
					</view>
				</view>
			</view>
		</view>
		<!-- 取号 -->
		<view class="offerNumber_details" >
			<view class="offer" @click="offer_number">
				取 号
			</view>
			<view class="note">
				当前范围可取号
			</view>
			<view class="position_info">
				<image style="width: 36rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8F%96%E5%8F%B7%E8%AF%A6%E6%83%85/u3628.svg" mode="widthFix"></image>
				<view class="position">
					四川省成都市锦江区画溪路666号
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"></uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const offerInfo = ref({
		registortime:''
	})
	onLoad((option)=>{
		api('/appofferdetail',{
			offernumber_id:option.offernumid
		}).then(res=>{
			offerInfo.value = res.data[0]
		}).catch(err=>{
			console.log(err)
		})
	})
	// 取号操作
	const popup = ref(null)
	const offer_number = () => {
		popup.value.open()
		uni.showLoading({
			title: '验证中'
		});
		setTimeout(function () {
			api('/appoffernum',{
				offernumber_id:offerInfo.value.offernumber_id
			},'POST').then(res=>{
				if(res.state==200){
					uni.hideLoading();
					popup.value.close()
					uni.showToast({
						title: '取号成功',
						duration: 2000
					});
					uni.navigateTo({
						url:'/pages/Self_retrieval/Self_retrieval'
					})
				}
			}).catch(err=>{
				console.log(err)
			})
			
		}, 2000);
	}
	
	
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 34rpx 25rpx;
		box-sizing: border-box;
		.doctorlist{
			width: 100%;
			height: 436rpx;
			background-color: #fff;
			padding: 40rpx 30rpx 40rpx 50rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.doctorInfo{
				display: flex;
				align-items: center;
				.textInfo{
					margin-left: 40rpx;
					.name_call{
						height: 50rpx;
						display: flex;
						align-items: baseline;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 26rpx;
						color: #1F1F1F;
						.name{
							font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
							font-weight: 700;
							color: #000;
							font-size: 36rpx;
							margin-right: 36rpx;
						}
					}
					.depart_campus{
						margin-top: 4rpx;
						display: flex;
						align-items: center;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #AAAAAA;
						.campus{
							margin-left: 28rpx;
						}
					}
				}
			}
			.patient_info{
				margin-top: 38rpx;
				.patient_list{
					height: 40rpx;
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 16rpx;
					.list_title{
						width: 114rpx;
						color: #AAAAAA;
						margin-right: 60rpx;
					}
				}
			}
		}
		// 取号
		.offerNumber_details{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
			.offer{
				width: 200rpx;
				height: 200rpx;
				line-height: 200rpx;
				text-align: center;
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%8F%96%E5%8F%B7%E8%AF%A6%E6%83%85/u3626.svg');
				background-size: cover;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #fff;
				font-weight: 700;
			}
			.note{
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #13C2C2;
				font-size: 28rpx;
				margin-top: 58rpx;
			}
			.position_info{
				height: 40rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				.position{
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #7F7F7F;
					margin-left: 10rpx;
				}
			}
		}
	}       
</style>
